<template>
  <div class="my-form">
    <div class="add">
      <el-form :rules="rules" ref="addF" label-width="120px">
        <el-form-item label="ID">
          {{ tableDataEdit.name }}
        </el-form-item>
        <el-form-item label="昵称" prop="username">
          <el-input v-model="addF.username" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="绑定手机" class="item-title">
          <el-input v-model="addF.phone" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <!-- <el-input v-model="addF.gender" placeholder="请输入"></el-input> -->
          <el-select
            clearable
            v-model="addF.gender"
            style="width: 100%"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="省份">
          <el-select
            v-model="search.provinceId"
            placeholder="选择省份"
            @change="changeProvince($event, province_list)"
            style="width: 100%"
          >
            <el-option label="--请选择--" value=""></el-option>
            <el-option
              :label="item.province"
              :value="item.provinceId"
              v-for="(item, index) in province_list"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="城市">
          <el-select
            v-model="search.cityId"
            placeholder="先选择省份"
            style="width: 100%"
          >
            <el-option label="--请选择--" value=""></el-option>
            <el-option
              :label="item.city"
              :value="item.cityId"
              v-for="(item, index) in city_list"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 5%;
      "
    >
      <el-button
        type="primary"
        style="width: 100px; height: 40px; font-size: 15px"
        @click="onChange"
        >确认</el-button
      >
    </div>
  </div>
</template>

<script>
import { doChangeinfo } from "crm/myinfo/myinfo.js";
export default {
  name: "Add",
  data() {
    return {
      flag: false,
      addF: {
        username: "",
        gender: "",
        phone: "",
      },
      options: [
        {
          value: 1,
          label: "男",
        },
        {
          value: 2,
          label: "女",
        },
      ],
      rules: {
        username: [
          validateLen(100),
          {
            required: true,
            message: "'",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    getRequestData() {
      const payload = {};
      payload.uid = localStorage.getItem("uid");
      // payload.uid = 1;
      getAddFDate(payload)
        .then((res) => {
          this.addF = res;
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
    },

    onChange() {
      this.$confirm("确认修改人员信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.addF.username !== "") {
            this.flag = true;
          } else {
            this.$message.info("请检查并填写必填项!");
          }
          if (this.flag == true) {
            const payload = this.addF;
            payload.uid = localStorage.getItem("uid");
            this.$delete(payload, "uplace");
            this.$delete(payload, "jihuo");
            this.$delete(payload, "grade");
            this.$delete(payload, "usernum");
            this.$delete(payload, "error_code");
            doChangeinfo(payload)
              .then((res) => {
                if (res.data.error_code == 0) {
                  this.$message.success("修改成功");
                  localStorage.setItem("username", this.addF.username);
                  // this.$router.push("/admin/arch/record");
                  this.$router.back();
                } else {
                  this.$message.error("修改失败");
                }
              })
              .catch((err) => {
                EventBus.$emit("closeloading");
              });
          }
        })
        .catch(() => {});
    },
  },
  mounted() {
    this.getRequestData();
  },
  activated() {
    this.getRequestData();
  },
  watch: {
    $route(to, from) {
      this.$router.go(0);
    },
  },
};
</script>

<style scoped>
.add {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10%;
}
.el-input {
  width: 300px;
  height: 50px;
}
.el-input /deep/.el-input__inner {
  width: 300px !important;
  height: 50px;
}
.el-select {
  width: 300px !important;
}
.el-form-item {
  margin-left: -2%;
  line-height: 70px;
}
.el-form-item /deep/ .el-form-item__label {
  font-size: 20px;
  margin-top: 5px;
  font-family: SimHei;
  font-weight: 600;
}
.el-select /deep/.el-input__inner {
  height: 50px;
}
</style>